<template>
	<div id="streaGoods">
		 
		<div class="neirong">
			<p class="hd"  @click="spellslist(items)">
				<i>
					<img :src="items.GoodsImg"  alt="加载失败" :onerror="imgError" />
				</i>
				<span class="hd_text">{{items.GoodsName}}</span>
				<span class="fontz"><font>￥{{items.CloudPrice}}</font><em>￥{{items.Price}}</em> <font class="right_f">×1</font></span>
			</p>
			<div class="induing">
				<p class="texts">拼团进度 {{items.ActorCount}}/{{items.CloudCount}}</p>
				<p class="textimg">
					<img  v-for="(imgs,index) in items.UserHeadUrl" v-if="index<8"  :src="imgs" :style="{'z-index':index}" alt="加载失败" :onerror="imgError" />
				</p>
				<p class="textbut">
					<a v-if="isTyoe==0" >拼单已成功，赶紧邀请好友吧</a>
					<a v-else  @click="Joingroup(items)">立即参团</a>
				</p>
				<p class="texttime">剩余：{{items.texts}}</p>
			</div>
			
		</div>
		
		<!--分享UI-->
		<div class="wxstrea" v-if="type" >
			<i class="icon-dianjiyoushangjiao iconfont"></i>
			<p>请点击右上角<br>
				将它发送给指定朋友<br>
				或分享到朋友圈</p> 
		</div> 
	</div>
</template>
<script>
	import { countdowm } from '@/js/public.js';
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import { MessageBox } from 'mint-ui';
	export default {
		name: 'streaGoods',
		components: {

		},
		data() {
			return {
				type:true,
				items:[],//数组信息
			}
		},
		created(){
			this.imgError=this.$store.state.imgError;
			this.pathname=window.location.pathname;
			this.shopId=this.$store.state.shopId;//获取店铺ID
		},  
		mounted() {
			console.log(window.location)
			this.orderID = this.$route.params.orderID;
			this.isTyoe= this.$route.params.isTyoe;
			this.isShow();
			//this.pathname=window.location.pathname;
			
			this.getShareGroupBuy();
			 
		},
		methods: {
			isShow(){
				if(this.isTyoe==1){
					this.type=false;
				}
				setTimeout(()=>{
					this.type=false;
				}, 3000)
			}, 
			//获取订单信息
			getShareGroupBuy(){
				Indicator.open({text: '加载中...'});
				let _this=this; 
				_this.$http.get("/GroupBuy/GetShareGroupBuy",{
					params:{
						"orderId":_this.orderID
					}
				}).then((res) => { 
					if(res.data.code==1){  
						//时间戳计算
						countdowm(res.data.data.RestTime,function(text){
							_this.$set(res.data.data,'texts',text);
						})
						_this.items=res.data.data;
						_this.WXstare(res.data.data);
					}else{ 
						MessageBox.alert(res.data.msg).then(action=>{
					    	_this.$router.push({path:'/clientele'})
					   }) 
					}
					Indicator.close();
				}).catch((err) => {
					console.log(err);
				});
			},
			//参与拼团
			Joingroup(items){ 
				console.log(items);
				let _this=this;  
				_this.$http.get("/GroupBuy/ValidateGroupBuy", {
					params: {
						"goodsId":items.GoodsId,
						"joinType":2,
						"orderRecordId":items.OrderRecordId
					}
				}).then((res) => {
					if(res.data.code==1){
						this.$router.push({path:'/clientele/confirmOrder/'+items.GoodsId+'/'+2+'/'+items.OrderRecordId})
						this.$store.state.goodsPath='/clientele/confirmOrder/'+items.GoodsId+'/'+2+'/'+items.OrderRecordId
					}else{
						Toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err)
				}); 
			},
			//跳转商品详情
			spellslist(item) {
				this.$router.push({
					path:'/clientele/goodsDetails/' + item.GoodsId
				})
			}, 
			WXstare(items){
				let _this=this; 
				let param={
		            title:items.GoodsName, // 分享标题
		            desc:items.GoodsName,// 分享描述  
		            link:'/clientele/streaGoods/'+items.GoodsId+'/'+1+'?shopID='+this.shopId, // 分享链接
		            imgUrl:items.GoodsImg, // 分享图标
		            success: function (res) {
		              // 用户确认分享后执行的回调函数
		              window.alert("已经分享成功！")
		            },
		            cancel: function (res) {
		              // 用户取消分享后执行的回调函数
		               window.alert("分享失败！")
		            }
				}  
				this.wxShare(0,param); 
			}
			
		}
	}
</script>
<style scoped>
	.wxstrea{
		position: absolute;
		top:0rem;
		right:0rem;  
		z-index: 10000;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
		padding:0.5rem 1rem;
	}
	.wxstrea i{
		display: block;
		text-align:right;
		font-size:1.5rem;
		color:#fff;
	}
	.wxstrea p{
		width:100%;
		font-size:0.533333rem;
		color: #fff;
		text-align: center;
		font-family:cursive;
		font-weight: 700;
		line-height:0.8rem;
		
	} 
	.induing{
		text-align: initial;
	}
	.induing .texts{
		font-size: 0.373333rem;
		color: #666666;
	}
	.textimg{
		padding: 0.5rem 0;
		text-align: center;
	} 
	
	.textimg img{
		width:1rem;
		height:1rem;
		border-radius:100%;
		margin-left: -0.2rem;
	}
	.textbut{
		width: 100%;
	}
	
	.textbut a{
		display: block;
		width: 100%;
		height: 1rem;
		background-color: #6530E0;
		color: #fff;
		border-radius:0.066666rem;
		text-align: center;
		font-size: 0.4rem;
		line-height: 1rem;
	}
	.texttime{
		text-align: center;
		color: #6530E0; 
		font-size: 0.373333rem;
		padding: 0.5rem 0;
	}   
	.fontz{
	    display:inline-block;
	}
	.fontz font{
		color: #6530E0;
		font-size: 0.373333rem;
	}
	.fontz em{
		text-decoration: line-through;
 	    font-size: 0.266666rem;
	    margin-left: 0.3rem;
	    color: #999999;
	}
	
	.neirong {
		width: 100%;
		padding: 0 0.5rem;
		background-color: #fff;
		text-align: center; 
	}
	
	.neirong .hd {
		color: #333333; 
		padding: 0.5rem 0;
		text-align: initial;
		overflow: hidden;
		
	}
	.neirong .hd i{
		width: 20%;
		margin-right: 5%;
		display: inline-block;
		float: left;
	}
	.neirong .hd i img{
		width: 100%;
	}
	.neirong .hd span{
		float: left;
		display: inline-block;
		width: 75%;  
		font-size: 0.373333rem;
		color: #333333;
		margin-bottom: 0.3rem;
	}
	
	.neirong .ft {
		font-size: 0.373333rem;
		color: #666;
		padding: 0.5rem 0;
	}
	
	.neirong .ct img {
		width: 70%;
	}
</style>